<script setup lang="ts">
import { ref, onMounted } from 'vue';

const stats = ref({
  challenges: 12,
  players: 156,
  activeTeams: 42
});

const recentActivity = ref([
  { username: 'hacker_x', challenge: 'XSS初级', time: '刚刚' },
  { username: 'security_master', challenge: 'SQL注入', time: '5分钟前' },
  { username: 'coder_101', challenge: '密码破解', time: '10分钟前' },
  { username: 'cyber_ninja', challenge: 'JavaScript分析', time: '20分钟前' }
]);

// 模拟打字效果
const welcomeText = ref('');
const fullText = '欢迎来到CTF靶场，准备好挑战你的网络安全技能了吗？';
let currentIndex = 0;

onMounted(() => {
  const typeInterval = setInterval(() => {
    if (currentIndex < fullText.length) {
      welcomeText.value += fullText[currentIndex];
      currentIndex++;
    } else {
      clearInterval(typeInterval);
    }
  }, 50);
});

const startChallenging = () => {
  // 触发导航到挑战页面
  window.location.hash = '#challenges';
};
</script>

<template>
  <div class="home-container">
    <!-- 欢迎区域 -->
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title glitch">欢迎来到CTF靶场</h1>
        <p class="hero-subtitle">{{ welcomeText }}<span class="cursor"></span></p>
        <button class="hero-button" @click="startChallenging">开始挑战</button>
      </div>
    </section>

    <!-- 统计信息 -->
    <section class="stats-section">
      <div class="stats-grid">
        <div class="stat-card card">
          <h3>挑战题目</h3>
          <p class="stat-number">{{ stats.challenges }}</p>
        </div>
        <div class="stat-card card">
          <h3>参与玩家</h3>
          <p class="stat-number">{{ stats.players }}</p>
        </div>
        <div class="stat-card card">
          <h3>活跃团队</h3>
          <p class="stat-number">{{ stats.activeTeams }}</p>
        </div>
      </div>
    </section>

    <!-- 最近活动 -->
    <section class="activity-section">
      <h2>最近活动</h2>
      <div class="activity-list">
        <div v-for="(activity, index) in recentActivity" :key="index" class="activity-item">
          <span class="username">{{ activity.username }}</span>
          <span class="action">解决了</span>
          <span class="challenge">{{ activity.challenge }}</span>
          <span class="time">{{ activity.time }}</span>
        </div>
      </div>
    </section>

    <!-- 特点介绍 -->
    <section class="features-section">
      <h2>平台特点</h2>
      <div class="features-grid">
        <div class="feature-card card">
          <h3>多样化题目</h3>
          <p>包含Web安全、密码学、逆向工程、取证分析等多种类型的挑战</p>
        </div>
        <div class="feature-card card">
          <h3>实时排名</h3>
          <p>实时更新排行榜，展示个人和团队的成绩</p>
        </div>
        <div class="feature-card card">
          <h3>技能提升</h3>
          <p>通过实战挑战提升你的网络安全技能</p>
        </div>
        <div class="feature-card card">
          <h3>社区互动</h3>
          <p>与其他安全爱好者交流经验，共同进步</p>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.home-container {
  width: 100%;
}

/* 欢迎区域 */
.hero-section {
  background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-text-dark) 100%);
  border-radius: 8px;
  padding: 4em 2em;
  text-align: center;
  margin-bottom: 2em;
  border: 1px solid rgba(243, 156, 18, 0.2);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(45deg, rgba(243, 156, 18, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(243, 156, 18, 0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(243, 156, 18, 0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(243, 156, 18, 0.05) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: 3em;
  margin-bottom: 0.5em;
  color: var(--color-primary);
}

.hero-subtitle {
  font-size: 1.2em;
  margin-bottom: 2em;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-bg-light);
}

.hero-button {
  font-size: 1.2em;
  padding: 0.8em 2em;
  background-color: rgba(243, 156, 18, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-button:hover {
  background-color: rgba(243, 156, 18, 0.3);
  box-shadow: 0 0 20px rgba(243, 156, 18, 0.5);
  transform: translateY(-2px);
}

/* 统计信息 */
.stats-section {
  margin-bottom: 3em;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5em;
}

.stat-card h3 {
  margin-top: 0;
  font-size: 1.2em;
  color: var(--color-text-dark);
}

.stat-number {
  font-size: 2.5em;
  font-weight: bold;
  margin: 0.5em 0;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(243, 156, 18, 0.5);
}

/* 最近活动 */
.activity-section {
  margin-bottom: 3em;
}

.activity-section h2 {
  color: var(--color-primary);
  margin-bottom: 1em;
}

.activity-list {
  background-color: var(--color-bg-dark);
  border: 1px solid rgba(243, 156, 18, 0.2);
  border-radius: 8px;
  padding: 1.5em;
}

.activity-item {
  padding: 0.8em 0;
  border-bottom: 1px solid rgba(243, 156, 18, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  color: var(--color-bg-light);
}

.activity-item:last-child {
  border-bottom: none;
}

.username {
  font-weight: bold;
  color: var(--color-primary);
}

.action {
  color: var(--color-bg-light);
}

.challenge {
  color: #fff;
  font-weight: 500;
}

.time {
  margin-left: auto;
  color: #aaa;
  font-size: 0.9em;
}

/* 特点介绍 */
.features-section h2 {
  color: var(--color-primary);
  margin-bottom: 1.5em;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5em;
}

.feature-card h3 {
  margin-top: 0;
  margin-bottom: 1em;
  color: var(--color-primary);
}

.feature-card p {
  color: var(--color-bg-light);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2em;
  }
  
  .hero-subtitle {
    font-size: 1em;
  }
  
  .hero-button {
    font-size: 1em;
    padding: 0.6em 1.5em;
  }
  
  .stats-grid,
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .activity-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
  }
  
  .time {
    margin-left: 0;
  }
}
</style>